<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { getDicts } from '@/api/login'
	import { getOrderDetail, orderAccept } from '@/api/sales'
	
	const loading = ref(true)
	const type = ref('detail')
	const uForm = ref(null)
	const form = ref({orderVO: {list: []}, description: ''})
	const rules = ref({
		// description: [
		// 	{required: true, message: '请输入受理备注', trigger: 'blur'}
		// ]
	})
	
	function init(id) {
		getData(id)
	}
	function getData(id) {
		loading.value = true
		getOrderDetail(id).then(res => {
			let data = res.result || {orderVO: {list: []}, description: ''}
			data.description = ''
			form.value = data
			loading.value = false
		}).catch(() => loading.value = false)
	}
	function goAccept() {
		uForm.value.validate().then(() => {
			loading.value = true
			let params = {acceptId: form.value.orderVO?.orderId, description: form.value.description }
			orderAccept(params).then(res => {
				uni.showToast({icon: 'success', title: '受理成功'})
				loading.value = false
				setTimeout(() => { uni.navigateBack() }, 200)
			}).catch(() => loading.value = false)
		})
	}
	
	onLoad((option) => {
		type.value = option.type || 'detail'
		let title = ''
		switch(type.value) {
			case 'accept': title = '受理订单'; break;
			default: title = '详情'; break;
		}
		uni.setNavigationBarTitle({title})
		if(option.id){
			init(option.id)
		}
	})
</script>

<template>
	<view :class="['app-container', ['accept'].includes(type)? 'show-bottom' : '']">
		<uv-form :model="form" :rules="rules" ref="uForm" labelWidth="210" :labelStyle="{color: '#6C6F73'}">
			<view class="form-box">
				<view class="head">基础信息</view>
				<view class="content">
					<uv-form-item label="订单编号">
						<view class="custom-content">
							<text>{{form.orderVO?.code || '--'}}</text>
						</view>
					</uv-form-item>
					<uv-form-item label="客户名称">
						<view class="custom-content">
							<text>{{form.orderVO?.receiverBy || '--'}}</text>
						</view>
					</uv-form-item>
					<uv-form-item label="联系方式">
						<view class="custom-content">
							<text>{{form.orderVO?.receiverPhone || '--'}}</text>
						</view>
					</uv-form-item>
					<uv-form-item label="单据日期">
						<view class="custom-content">
							<text>{{form.orderVO?.createTime || '--'}}</text>
						</view>
					</uv-form-item>
					<uv-form-item label="收货地址">
						<view class="custom-content">
							<text>{{form.orderVO?.receiverAddress || '--'}}{{form.orderVO?.receiverDetailAddress}}</text>
						</view>
					</uv-form-item>
					<uv-form-item label="期望到货时间">
						<view class="custom-content">
							<text>{{form.orderVO?.expectedTime || '--'}}</text>
						</view>
					</uv-form-item>
					<uv-form-item label="订单备注" prop="remark">
						<view class="custom-content">
							<text>{{form.orderVO?.remark || '--'}}</text>
						</view>
					</uv-form-item>
				</view>
			</view>
			<view class="form-box">
				<view class="head">销售商品</view>
				<view class="content">
					<view class="list-box" v-for="(item, index) in form.orderVO?.list" :key="item.itemId">
						<view class="box-head">
							<text class="title">{{item.name}}</text>
							<text class="price">
								<text>{{item.subtotal? item.subtotal.toFixed(2).split(".")[0] : '0'}}</text>
								<text>.</text>
								<text style="font-size: 60%;">{{item.subtotal? item.subtotal.toFixed(2).split(".")[1] : '00'}}</text>
							</text>
						</view>
						<view class="box-info">
							<text>下单量：{{item.num || '--'}}</text>
							<text>商品单价：￥{{item.price || '--'}}</text>
						</view>
					</view>
					<view class="price-box">
						<view class="price-row" v-if="form.acceptVO">
							<text>定金：</text>
							<text class="price">
								<text>{{form.orderVO?.depositAmount? form.orderVO.depositAmount.toFixed(2).split(".")[0] : '0'}}</text>
								<text>.</text>
								<text style="font-size: 60%;">{{form.orderVO?.depositAmount? form.orderVO.depositAmount.toFixed(2).split(".")[1] : '00'}}</text>
							</text>
						</view>
						<view class="price-row">
							<text>订单总价：</text>
							<text class="price">
								<text>{{form.orderVO?.total? form.orderVO.total.toFixed(2).split(".")[0] : '0'}}</text>
								<text>.</text>
								<text style="font-size: 60%;">{{form.orderVO?.total? form.orderVO.total.toFixed(2).split(".")[1] : '00'}}</text>
							</text>
						</view>
					</view>
				</view>
			</view>
			<view class="form-box" v-if="type === 'accept'">
				<view class="head">受理信息</view>
				<view class="content padding-bottom">
					<uv-form-item label="受理备注">
						<view class="custom-content">
							<uv-input v-model="form.description" placeholder="请输入" border="none" maxlength="300" clearable />
						</view>
					</uv-form-item>
				</view>
			</view>
			<view class="form-box" v-if="form.acceptVO">
				<view class="head">受理信息</view>
				<view class="content">
					<uv-form-item label="受理人">
						<view class="custom-content">
							<text>{{form.acceptVO.createBy || '--'}}</text>
						</view>
					</uv-form-item>
					<uv-form-item label="受理时间">
						<view class="custom-content">
							<text>{{form.acceptVO.createTime || '--'}}</text>
						</view>
					</uv-form-item>
					<uv-form-item label="备注">
						<view class="custom-content">
							<text>{{form.acceptVO.description || '--'}}</text>
						</view>
					</uv-form-item>
				</view>
			</view>
		</uv-form>
		<view class="form-bottom theme-btn" v-if="['accept'].includes(type)">
			<uv-button type="primary" shape="circle" text="受理" @click="goAccept" :disabled="loading" v-if="type === 'accept'"></uv-button>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		padding-top: 2rpx;
		&.show-bottom{
			padding-bottom: 116rpx;
			padding-bottom: calc(constant(safe-area-inset-bottom) + 116rpx);
			padding-bottom: calc(env(safe-area-inset-bottom) + 116rpx);
		}
		.form-box{
			padding: 16rpx 32rpx;
			margin-bottom: 14rpx;
			background-color: #fff;
			.head{
				margin: 18rpx 0;
				position: relative;
				font-size: var(--theme-lg);
				font-weight: 600;
				&::before{
					content: "";
					position: absolute;
					top: 8rpx;
					left: -16rpx;
					width: 8rpx;
					height: 30rpx;
					background-color: $uv-primary;
				}
			}
			.content{
				.custom-content{
					width: 100%;
				}
				.flex-justify{
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
				.text-no{
					color: #9CA0A6;
				}
				::v-deep .uv-form-item__body{
					padding: 18rpx 0;
				}
				::v-deep .uv-form-item__body__left__content__required{
					left: unset;
					right: -8rpx;
				}
			}
			.list-box{
				padding: 24rpx;
				background-color: #F7F7F7;
				border-radius: 8rpx;
				border: 2rpx solid #F5F5F5;
				.box-head{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.title{
						font-weight: 600;
					}
				}
				.box-info{
					margin-top: 16rpx;
					display: flex;
					align-items: center;
					gap: 48rpx;
					color: #9CA0A6;
					font-size: calc(var(--theme-sm) + 2rpx);
				}
			}
			.list-box + .list-box{
				margin-top: 16rpx;
			}
			.list-box + .price-box{
				margin-top: 16rpx;
			}
			.price-box{
				padding: 16rpx 0;
				display: flex;
				flex-direction: column;
				gap: 16rpx;
				.price-row{
					text-align: right;
					.price{
						color: #F82323;
					}
				}
			}
			.price{
				font-weight: 600;
				&::before{
					content: "¥";
				}
			}
			.padding-bottom{
				padding-bottom: 48rpx;
			}
		}
		.form-bottom{
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 116rpx;
			height: calc(constant(safe-area-inset-bottom) + 116rpx);
			height: calc(env(safe-area-inset-bottom) + 116rpx);
			padding: 16rpx 24rpx;
			padding-bottom: calc(constant(safe-area-inset-bottom) + 16rpx);
			padding-bottom: calc(env(safe-area-inset-bottom) + 16rpx);
			background-color: #FFFFFF;
			box-shadow: 0rpx -8rpx 8rpx 0rpx rgba(0,0,0,0.04);
			z-index: 100;
		}
		.popup-box{
			width: 686rpx;
			padding: 32rpx;
			.popup-title{
				font-weight: 600;
				font-size: var(--theme-xl);
				line-height: var(--theme-xl-line);
				text-align: center;
			}
			.popup-content{
				padding: 30rpx 48rpx 48rpx;
				color: #6C6F73;
				text-align: center;
			}
			.popup-bottom{
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 32rpx;
			}
		}
	}
</style>